<!DOCTYPE html>
<html>
<head>
    <title>服务商管理</title>
    <#include "/header.html">
    <!-- 文件上传 -->
    <link rel="stylesheet" href="${request.contextPath}/statics/plugins/oss/style.css">
    <script type="text/javascript" src="${request.contextPath}/statics/plugins/oss/js/plupload.full.min.js"></script>
    <script type="text/javascript" src="${request.contextPath}/statics/plugins/oss/ziyun_library.js"></script>
    <!-- 图片预览 -->
    <link rel="stylesheet" href="${request.contextPath}/statics/plugins/viewer/viewer.min.css">
    <script src="${request.contextPath}/statics/plugins/viewer/viewer.min.js"></script>
    <!-- js-xlsx -->
    <script src="${request.contextPath}/statics/plugins/js-xlsx/xlsx.full.min.js"></script>
</head>
<body>
<div id="app" v-cloak>
    <div v-show="showList">
        <el-form :inline="true" v-model.trim="q" size="small">
            <el-button type="primary" size="small" icon="el-icon-search" @click="search"></el-button>
            <el-button type="primary" size="small" @click="rest">重置</el-button>
            <el-form-item>
                <el-input size="small" v-model.trim.trim="q.param" placeholder="请输入服务商名称或手机号"></el-input>
            </el-form-item>
            <el-button type="primary" size="small" @click="add">新增</el-button>
            <el-button type="primary" size="small" @click="handleDelete">删除</el-button>
        </el-form>

        <el-table ref="tableData" :data="tableData" style="width:100%" border highlight-current-row class="tb-edit" size="small"
                  :default-sort="{prop: 'createtime', order: 'descending'}" @selection-change="handleSelectionChange" @row-click="handleclick">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="teamName" label="服务商名称" width="100" show-overflow-tooltip></el-table-column>
            <el-table-column prop="legalName" label="法人名字" width="80"></el-table-column>
            <el-table-column prop="idCardUrls" label="法人身份证" width="200">
                <template slot-scope="scope">
                    <form class="form-inline">
                        <div class="form-group ">
                            <img class="form-inline" v-if="scope.row.imga" style="width: 80px;height: 50px;" :src="window.parent.vm.ossHost+scope.row.imga" />
                            <img class="form-inline" v-if="scope.row.imgb" style="width: 80px;height: 50px;" :src="window.parent.vm.ossHost+scope.row.imgb" />
                        </div>
                    </form>
                </template>
            </el-table-column>
            <el-table-column prop="businessUrl" label="营业执照" width="100">
                <template slot-scope="scope">
                    <form class="form-inline">
                        <div class="form-group">
                            <img class="form-inline" v-if="scope.row.businessUrl" style="width: 80px;height: 50px;" :src="window.parent.vm.ossHost+scope.row.businessUrl" />
                        </div>
                    </form>
                </template>
            </el-table-column>
            <el-table-column prop="nickname" label="联系人" width="100"></el-table-column>
            <el-table-column prop="mobile" label="手机号码" width="110"></el-table-column>
            <el-table-column prop="areas" label="负责地区" width="80"></el-table-column>
            <el-table-column prop="shops" label="负责商家" width="80"></el-table-column>
            <el-table-column prop="agreementUrl" label="合同" width="100">
                <template slot-scope="scope">
                    <form class="form-inline">
                        <div class="form-group">
                            <img class="form-inline" v-if="scope.row.agreementUrl" style="width: 80px;height: 50px;" :src="window.parent.vm.ossHost+scope.row.agreementUrl" />
                        </div>
                    </form>
                </template>
            </el-table-column>
            <el-table-column prop="members" label="成员"></el-table-column>
            <el-table-column prop="userId" label="推荐码"></el-table-column>
            <el-table-column prop="delFlag" label="状态" :formatter="delFlagFormatter"></el-table-column>
            <el-table-column prop="createtime" label="创建时间" width="150"></el-table-column>
            <el-table-column label="操作" width="160">
                <template scope="scope">
                    <el-button size="small" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="small" type="primary" @click="handleCheck(scope.$index, scope.row)">审核</el-button>
                </template>
            </el-table-column>
        </el-table>

        <div align="center">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
                           :page-sizes="[20, 50, 80, 100]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="totalCount"
                           background>
            </el-pagination>
        </div>
    </div>

    <div v-show="editView" class="panel panel-default">
        <div class="panel-heading"><b>{{title}}服务商信息</b></div>
        <div class="container">
            <div class="row clearfix">
                <div class="col-md-6 column"><br>
                    <el-form label-position="right" label-width="100px" :model="facilitator" ref="ruleForm" size="small">
                        <el-row>
                            <el-col :span="20" :offset="1">
                                <div class="grid-content bg-purple-dark">
                                    <el-form-item label="服务商名称" prop="teamName" :rules="[{ required: true, message: '请输入服务商名称', trigger: 'blur' }]">
                                        <el-input v-model.trim.trim="facilitator.teamName" style="width: 300px"></el-input>
                                    </el-form-item>
                                    <el-form-item label="联系人姓名" prop="nickname">
                                        <el-input v-model.trim.trim="facilitator.nickname" style="width: 300px"></el-input>
                                    </el-form-item>
                                    <el-form-item label="手机号码" prop="mobile" :rules="[{ required: true, message: '请输入手机号码', trigger: 'blur' }]">
                                        <el-input v-model.trim.trim="facilitator.mobile" style="width: 300px" :readonly="title=='编辑'"></el-input>
                                    </el-form-item>
                                    <el-form-item label="法人姓名" prop="legalName" :rules="[{ required: true, message: '请输入法人姓名', trigger: 'blur' }]">
                                        <el-input v-model.trim.trim="facilitator.legalName" style="width: 300px"></el-input>
                                    </el-form-item>
                                    <el-form-item label="法人身份证" prop="idCardUrls" style="width: 400px">
                                        <div class="thumbnail">
                                            <template v-if="idCardImgs[0]">
                                                <img id="image1" :src="window.parent.vm.ossHost + idCardImgs[0]" style="height: 150px" class="showview">
                                            </template>
                                            <template v-else>
                                                <img src="/statics/img/logo/logo_s.jpg">
                                            </template>
                                        </div>
                                        <p style="text-align: center"><a class="btn btn-info btn-sm" id="upload1">点击上传正面</a></p>
                                        <div class="thumbnail">
                                            <template v-if="idCardImgs[1]">
                                                <img id="image2" :src="window.parent.vm.ossHost + idCardImgs[1]" style="height: 150px" class="showview">
                                            </template>
                                            <template v-else>
                                                <img src="/statics/img/logo/logo_s.jpg">
                                            </template>
                                        </div>
                                        <p style="text-align: center"><a class="btn btn-info btn-sm" id="upload2">点击上传反面</a></p>
                                    </el-form-item>
                                </div>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
                <div class="col-md-6 column"><br>
                    <el-form label-position="right" label-width="100px" :model="facilitator" size="small">
                        <el-row>
                            <el-col :span="20" :offset="1">
                                <div class="grid-content bg-purple-dark">
                                    <el-form-item label="合同" prop="agreementUrl" style="width: 400px;height: 50%">
                                        <div class="thumbnail">
                                            <template v-if="facilitator.agreementUrl">
                                                <img id="image3" :src="window.parent.vm.ossHost + facilitator.agreementUrl" style="height: 250px" class="showview">
                                            </template>
                                            <template v-else>
                                                <img src="/statics/img/logo/logo.jpg">
                                            </template>
                                        </div>
                                        <p style="text-align: center"><a class="btn btn-info btn-sm" id="upload3">点击上传签订的合同</a></p>
                                    </el-form-item>
                                    <el-form-item label="营业执照" prop="businessUrl" style="width: 400px;height: 50%">
                                        <div class="thumbnail">
                                            <template v-if="facilitator.businessUrl">
                                                <img id="image4" :src="window.parent.vm.ossHost + facilitator.businessUrl" style="height: 250px" class="showview">
                                            </template>
                                            <template v-else>
                                                <img src="/statics/img/logo/logo.jpg">
                                            </template>
                                        </div>
                                        <p style="text-align: center"><a class="btn btn-info btn-sm" id="upload4">点击上传企业的营业执照</a></p>
                                    </el-form-item>
                                </div>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
            </div>
        </div>

        <div class="panel-heading"><b>商户信息<span style="color: red">(请选择1种方式进行添加)</span></b></div><br>
        <el-row>
            <el-col :span="12">
                <div class="col-md-3 control-label">1.根据省市区选择商家：</div>
                <el-row>
                    <el-col :span="16" :offset="6">
                        <div class="grid-content bg-purple-dark">
                            <div class="grid-content bg-purple-dark" v-for="(item,index) in shopIdsList" :key="index">
                                <el-cascader size="samll" placeholder="请选择省市区" :options="options" filterable @change="handleItemChange"></el-cascader>
                                <el-select size="samll" v-model.trim="shopIdsList[index]" multiple placeholder="请选择商家">
                                    <el-option v-for="item in shops" :key="item.seller_id" :label="item.seller_name" :value="item.seller_id"></el-option>
                                </el-select>
                                <el-button icon="el-icon-plus" circle @click="addlist"></el-button>
                                <el-button icon="el-icon-minus" circle @click="dellist(index)"></el-button>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </el-col>
            <el-col :span="12">
                <div class="col-md-2 control-label">2.导入商家信息：</div>
                <div class="form-group">
                    <div class="col-md-8">
                        <textarea id="shop" cols="200" rows="5" class="form-control" placeholder="请先下载模板,然后按模板格式填写,再导入" readonly></textarea>
                        <textarea id="shopIds" cols="200" rows="5" class="form-control" placeholder="请先下载模板,然后按模板格式填写,再导入" readonly style="display: none"></textarea>
                    </div>
                    <div class="col-md-3 col-md-offset-3 control-label">
                        <input type="file" onchange="importExcel(this)" />
                    </div>
                    <div class="col-md-3 col-md-offset-1 control-label">
                        <button type="button" id="btn2">下载模板</button>
                    </div>
                </div>
            </el-col>
        </el-row>

        <div class="panel-heading"><b>代理商信息导入</b></div><br>
        <el-row>
            <el-col :span="12">
                <div class="form-group">
                    <div class="col-md-3 control-label">导入手机号码：</div>
                    <div class="col-md-8">
								<textarea id="phoneTextarea" cols="80" rows="5" class="form-control" placeholder="请先下载模板,然后按模板格式填写,再导入"
                                          readonly></textarea>
                    </div>
                    <div class="col-md-3 col-md-offset-3 control-label">
                        <input type="file" onchange="importExcel(this)" />
                    </div>
                    <div class="col-md-3 col-md-offset-1 control-label">
                        <button type="button" id="btn1">下载模板</button>
                    </div>
                </div>
            </el-col>
        </el-row>


        <div slot="footer" class="dialog-footer"><br><br>
            <el-row>
                <el-col :span="8" :offset="11">
                    <el-button type="primary" size="small" @click="audit('ruleForm')">保存</el-button>
                    <el-button type="primary" size="small" @click="showList=!showList,editView=!editView">取消</el-button>
                </el-col>
            </el-row>
        </div>
    </div>

    <div v-show="checkView" class="panel panel-default">
        <div class="panel-heading"><b>商家导入信息</b></div>
        <el-row>
            <el-col :span="10"><br>
                <div class="col-md-3 control-label"><b>左边显示省市区,右边显示商家</b></div>
                <el-row>
                    <el-col :span="16" :offset="8">
                        <div class="grid-content bg-purple-dark">
                           <p style="font-size: larger;" v-for="item in areaList">{{item}}</p>
                        </div>
                    </el-col>
                </el-row>
            </el-col>
            <el-col :span="14">
                <br>
                <div class="form-group">
                    <div class="col-md-10">
                        <el-input type="textarea" :rows="5" placeholder="商家" v-model.trim="shopList" readonly>
                    </el-input>
                    </div>
                </div>
            </el-col>
        </el-row>
        <br>
        <div class="panel-heading"><b>商家新绑定信息</b></div>
        <br>
        <el-form :inline="true" v-model.trim="qa">
            <el-form-item>
                <el-input size="small" v-model.trim="qa.sellerName" placeholder="请输入商家名"></el-input>
            </el-form-item>
            <el-form-item>
                <el-input size="small" v-model.trim="qa.sellerMobile" placeholder="请输入手机号码"></el-input>
            </el-form-item>
            <el-form-item>
                <el-input size="small" v-model.trim="qa.sellerQq" placeholder="请输入商家QQ"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" size="small" icon="el-icon-search" @click="searchQ"></el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" size="small" @click="restQ">重置</el-button>
            </el-form-item>
        </el-form>
            <el-table :data="auditVoList" style="width: 100%" border highlight-current-row class="tb-edit">
                <el-table-column prop="sellerName" label="商家名" min-width="15%" show-overflow-tooltip></el-table-column>
                <el-table-column prop="name" label="联系人" min-width="5%"></el-table-column>
                <el-table-column prop="sellerMobile" label="手机号码" min-width="7%"></el-table-column>
                <el-table-column prop="sellerQq" label="QQ" min-width="7%"></el-table-column>
                <el-table-column prop="area" label="地区" min-width="9%"></el-table-column>
                <el-table-column prop="addr" label="地址" min-width="13%" show-overflow-tooltip></el-table-column>
                <el-table-column prop="disabled" label="是否冻结" min-width="5%"></el-table-column>
                <el-table-column prop="display" label="前端展示" min-width="5%"></el-table-column>
                <el-table-column prop="createTime" label="绑定时间" min-width="10%"></el-table-column>
                <el-table-column prop="dname" label="代理人" min-width="10%"></el-table-column>
                <el-table-column label="审核" min-width="10%">
                    <template scope="scope">
                        <el-button size="small" type="primary" @click="refuse(scope.$index, scope.row,flag=1)">通过</el-button>
                        <el-button size="small" type="primary" @click="refuse(scope.$index, scope.row,flag=0)">拒绝</el-button>
                    </template>
                </el-table-column>
            </el-table>

        <div slot="footer" class="dialog-footer"><br>
            <el-row>
                <el-col :span="8" :offset="11">
                    <el-button type="primary" size="small" >确定</el-button>
                    <el-button type="primary" size="small" @click="closeCheckView">取消</el-button>
                </el-col>
            </el-row>
        </div>
    </div>
</div>

<script src="${request.contextPath}/statics/js/modules/facilitator/facilitator.js?_${.now?long}"></script>
<style>
    /* 设置当前选中行的背景颜色 */
    /*.el-table__body tr.current-row>td {*/
    /*background: #c9eff5 !important;*/
    /*}*/
    /* 设置表主体的高度 */
    .el-table__body td,
    .el-table__body th {
        padding: 3px;
    }

    /* 设置表头的高度 */
    .el-table__header td,
    .el-table__header th {
        padding: 6px 0px;
    }
</style>
</body>
</html>
